<template>
  <div class="employee-management">
    <!-- 操作按钮 -->
    <el-button type="primary" icon="el-icon-plus" @click="openAddDialog">新增员工</el-button>

    <!-- 员工信息表格 -->
    <el-table :data="paginatedEmployees" style="width: 100%" stripe>
      <el-table-column label="编号" prop="id" width="100" align="center" />
      <el-table-column label="用户名" prop="name" width="180" align="center" />
      <el-table-column label="密码" prop="password" width="180" align="center" />
      <el-table-column label="电话" prop="phone" width="180" align="center" />
      <el-table-column label="操作" width="220" align="center">
        <template #default="scope">
          <el-button type="text" size="small" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteEmployee(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控制和每页条数选择 -->
    <div class="pagination-wrapper">
      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="employees.length"
          layout="total, prev, pager, next, jumper"
          @current-change="handlePageChange"
          class="pagination"
      />
      <el-select v-model="pageSize" class="page-size-select" @change="handlePageSizeChange" placeholder="每页显示条数">
        <el-option label="3条" :value="3"></el-option>
        <el-option label="5条" :value="5"></el-option>
        <el-option label="10条" :value="10"></el-option>
        <el-option label="20条" :value="20"></el-option>
      </el-select>
    </div>

    <!-- 新增/编辑员工弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="400px">
      <el-form :model="currentEmployee" ref="employeeForm" label-width="80px">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="currentEmployee.name" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="currentEmployee.password" type="password" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="currentEmployee.phone" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEmployee">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 三条静态测试数据
      employees: [
        { id: 1, name: '张三', password: '123456', phone: '13800138000' },
        { id: 2, name: '李四', password: 'abcdef', phone: '13800138001' },
        { id: 3, name: '王五', password: 'password', phone: '13800138002' }
      ],
      currentEmployee: { id: null, name: '', password: '', phone: '' },
      currentPage: 1, // 当前页
      pageSize: 3,    // 每页显示的数据条数
      dialogVisible: false,
      dialogTitle: '新增员工'
    };
  },
  computed: {
    // 根据分页数据计算当前页的数据
    paginatedEmployees() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.employees.slice(start, end);
    }
  },
  methods: {
    // 打开新增员工弹窗
    openAddDialog() {
      this.currentEmployee = { id: null, name: '', password: '', phone: '' };
      this.dialogTitle = '新增员工';
      this.dialogVisible = true;
    },

    // 打开编辑员工弹窗
    openEditDialog(employee) {
      this.currentEmployee = { ...employee };
      this.dialogTitle = '编辑员工';
      this.dialogVisible = true;
    },

    // 保存员工（新增或编辑）
    saveEmployee() {
      if (this.currentEmployee.id) {
        // 编辑操作
        const index = this.employees.findIndex(emp => emp.id === this.currentEmployee.id);
        this.$set(this.employees, index, this.currentEmployee);
      } else {
        // 新增操作
        this.currentEmployee.id = this.employees.length + 1;
        this.employees.push(this.currentEmployee);
      }
      this.dialogVisible = false;
      this.$message.success(`${this.dialogTitle === '新增员工' ? '新增' : '编辑'}员工成功`);
    },

    // 删除员工
    deleteEmployee(employee) {
      this.$confirm('确认删除该员工吗?', '删除员工', {
        type: 'warning',
      }).then(() => {
        this.employees = this.employees.filter(item => item.id !== employee.id);
        this.$message.success('删除员工成功');
      }).catch(() => {});
    },

    // 切换当前页
    handlePageChange(page) {
      this.currentPage = page;
    },

    // 切换每页显示的条数
    handlePageSizeChange(size) {
      this.pageSize = size;
    }
  }
};
</script>

<style scoped>
.employee-management {
  padding: 20px;
}

.dialog-footer {
  text-align: right;
}

.el-button {
  margin-right: 10px;
}

.el-table .cell {
  text-align: center; /* 确保表格内容居中对齐 */
}

.el-table-column {
  padding: 10px;
}

.el-table .el-button {
  margin-left: 10px;
  margin-right: 10px;
}

.el-button--text {
  font-size: 14px;
  color: #409eff;
}

.el-button--text:hover {
  color: #16a085;
}

.el-dialog .el-form-item {
  margin-bottom: 20px;
}

.el-table .cell {
  line-height: 40px; /* 表格内容垂直居中 */
}

.el-table th,
.el-table td {
  text-align: center;
}

.el-table th {
  background-color: #f4f4f4;
  color: #333;
  font-weight: bold;
}

.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.page-size-select {
  margin-left: 10px;
  width: 150px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
